<template>
  <div class="container d-flex flex-column flex-grow-1">
    <div class="ratio ratio-21x9">
      <el-carousel trigger="click" height="100%">
        <el-carousel-item v-for="(item,index) in carouselList" :key="index">
          <img :src="item.img" alt="加载失败" style="width:100%;height:100%;object-fit: cover;object-position: center">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="mt-5 d-flex flex-column">
      <div class="h1 text-center">装修案例</div>
      <img-list></img-list>
    </div>
  </div>
</template>
<script>
import Avtar from "@/components/avtar.vue";
import ImgList from "@/views/font/DesignImage.vue";

export default {
  name: "HomeComponent",
  components: {ImgList, Avtar},
  data() {
    return {
      carouselList: [],
    }
  },
  methods: {
    go(url) {
      this.$router.push(url)
    },
  },
  async created() {
    this.carouselList = [
      {img: require('@/assets/升级.png')},
      {img: require('@/assets/德标工艺.png')},
      {img: require('@/assets/用爱做家.png')},
      {img: require('@/assets/设计.png')},
    ]
  }
}
</script>

<style scoped lang="less">
</style>